<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>通知公告</title>
    <link href="http://localhost:8080/static/layui/css/layui.css" rel="stylesheet">
    <style>
        body {
            padding: 6px 16px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="demoTable">
    <form class="layui-form" action="javascript:;">
        公告标题：
        <div class="layui-inline">
            <input class="layui-input" name="noticeTitle" id="noticeTitle" autocomplete="off" style="width: 100px;">
        </div>
        操作人员：
        <div class="layui-inline">
            <input class="layui-input" name="createBy" id="createBy" autocomplete="off" style="width: 120px;">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">类型: </label>
            <div class="layui-input-inline" style="width: 100px;">
                <select name="noticeType" id="noticeType">
                    <option value="">请选择</option>
                    <option value="1">通知</option>
                    <option value="2">公告</option>
                </select>
            </div>
        </div>

        <button class="layui-btn" data-type="reload" id="search">搜索</button>
    </form>
</div>


<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>

<script src="http://localhost:8080/static/layui/layui.js"></script>
<script src="http://localhost:8080/static/layui/js/jquery-3.6.3.js"></script>
<script>
    layui.use(function () {
        // 得到需要的内置组件
        let layer = layui.layer; //弹层
        let laypage = layui.laypage; //分页
        let table = layui.table; //表格
        let dropdown = layui.dropdown; //下拉菜单

        // 执行一个 table 实例
        table.render({
            elem: '#demo'
            , height: 420
            , url: 'http://localhost:8080/sysNotice/selectAllNotice.do' //数据接口（此处为静态数据，仅作演示）
            , title: '用户表'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , limit: 10  //每页显示行数
            , limits: [10, 20, 30]  //分页下拉框参数组
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'noticeId', title: '序号', width: 120, sort: true, fixed: 'left'}
                , {field: 'noticeTitle', title: '公告标题', width: 300}
                , {
                    field: 'noticeType',
                    title: '公告类型',
                    width: 120,
                    sort: true,
                }
                , {field: 'status', title: '状态', width: 150}
                , {field: 'createBy', title: '创建者', width: 120}
                , {field: 'createTime', title: '创建时间', width: 200}
                , {fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo'}
            ]],
            id: "testReload",//写其他事件时，刷新回显table表格数据，调用其方法
            where: {
                noticeTitle: $("#noticeTitle").val(),
                createBy: $("#createBy").val(),
                noticeType: $("#noticeType").val(),
            }
        });

        //搜索
        $("#search").on('click', function () {
            let searchNoticeTitle = $("#noticeTitle").val();
            let searchCreateBy = $('#createBy').val();
            let searchNoticeType = $("#noticeType").val();
            table.reload('testReload', {
                page: {
                    curr: 1//重新从第一页开始
                },
                where: {
                    noticeTitle: searchNoticeTitle,
                    createBy: searchCreateBy,
                    noticeType: searchNoticeType,
                },
            });
            //重加载后，重新赋值上次搜索的内容
            $('noticeTitle').val(searchNoticeTitle);
            $('createBy').val(searchCreateBy);
            $('noticeType').val(searchNoticeType);
        });


        // 头工具栏事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,//页面
                        title: "添加",
                        area: ["60%", "80%"],
                        content: 'http://localhost:8080/static/notice/layui_notice_add.html'
                    })
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.open({
                            type: 2,//页面
                            title: "编辑",
                            area: ["60%", "80%"],
                            content: 'http://localhost:8080/static/notice/layui_notice_update.html?noticeId=' + checkStatus.data[0].noticeId
                        })
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm('真的删除行么', function (index) {
                            $.ajax({
                                url: "http://localhost:8080/sysNotice/deleteNotice.do",
                                data: {"roleId": checkStatus.data[0].roleId},
                                type: "post",
                                success: function (res) {
                                    console.log(res);
                                    if (res == 1) {
                                        //添加成功，关闭当前弹窗层
                                        layer.msg("删除成功");
                                        window.location.href = "http://localhost:8080/sysNotice/notice.do";

                                    } else {
                                        layer.msg("删除失败");
                                    }
                                    window.location.href = "http://localhost:8080/sysNotice/notice.do";
                                },
                                error: function () {
                                    console.log("err....");
                                }
                            });
                        });
                    }
                    break;
            }
            ;
        });

        // 单元格工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg(JSON.stringify(data));//json格式
            } else if (layEvent === 'more') {
                //下拉菜单
                dropdown.render({
                    elem: this //触发事件的 DOM 对象
                    , show: true //外部事件触发即显示
                    , data: [{
                        title: '编辑'
                        , id: 'edit'
                    }, {
                        title: '删除'
                        , id: 'del'
                    }]
                    , click: function (menudata) {
                        if (menudata.id === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                //obj.del(); //删除对应行（tr）的DOM结构
                                //layer.close(index);
                                //向服务端发送删除指令
                                //layer.msg(JSON.stringify(data));
                                $.ajax({
                                    url: "http://localhost:8080/sysNotice/deleteNotice.do",
                                    data: data,
                                    type: "post",
                                    success: function (res) {
                                        console.log(res);
                                        if (res == 1) {
                                            //添加成功，关闭当前弹窗层
                                            layer.msg("删除成功");
                                            window.location.href = "http://localhost:8080/sysNotice/notice.do";

                                        } else {
                                            layer.msg("删除失败");
                                        }
                                        window.location.href = "http://localhost:8080/sysNotice/notice.do";
                                    },
                                    error: function () {
                                        console.log("err....");
                                    }
                                });
                            });
                        } else if (menudata.id === 'edit') {
                            layer.open({
                                type: 2,//页面
                                title: "编辑",
                                area: ["60%", "80%"],
                                content: 'http://localhost:8080/static/notice/layui_notice_update.html?noticeId=' + data.noticeId
                            })
                        }
                    }
                    , align: 'right' //右对齐弹出
                    , style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                })
            }
        });

        // 分页
        //     laypage.render({
        //         elem: 'pageDemo' //分页容器的id
        //         , count: 1000 //数据总数
        //         , limit: 5 //每页显示的数据条数
        //         , skin: '#1E9FFF' //自定义选中色值
        //         //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
        //         , jump: function (obj, first) {
        //             if (!first) {
        //                 layer.msg('第' + obj.curr + '页', {offset: 'b'});
        //             }
        //             $.ajax({
        //                 url: "",
        //                 data: {"page": obj.curr, "limit": 3},
        //                 success: function (res) {
        //                     console.log(res);
        //                     //parent.location.reload();
        //                 },
        //                 error: function () {
        //                     console.log(" err....");
        //                 }
        //             });
        //         },
        //
        //     });
        // });

    });

</script>
</body>
</html>
